<template>
  <view class="user">
    <view class="user-top">
      <view class="user-top-infor" @click="gologin('/pages/login/index')">
        <view class="infor-icon">
          <image src="@/static/images/user/userIcon.png" alt=""></image>
        </view>
        <view class="infor-name">{{ userName }}</view>
      </view>
      <view class="user-top-set">
        <view class="set-content">
          <view class="set-icon" @click="goRouter('/pages/user/news')">
            <image src="@/static/images/user/notice.png" alt=""></image>
            <view class="mark-num" v-if="unreadMessages && (unreadMessages != 0)">{{ unreadMessages }}</view>
          </view>
          <view class="set-icon" @click="goRouter('/pages/user/favorites')">
            <image src="@/static/images/user/message.png" alt=""></image>
            <!-- <view class="mark-num">{{ markNum.messageNums }}</view> -->
          </view>
          <view class="set-icon" @click="settingClick">
            <image src="@/static/images/user/setting.png" alt=""></image>
          </view>
        </view>

        <view v-if="settingShow" class="set-show">
          <view class="show-advice show-select">
            <image src="@/static/images/user/adviceFeedback.png" alt=""></image>
            <view>建议反馈</view>
          </view>
          <view class="show-line"></view>
          <view class="show-advice show-select">
            <image src="@/static/images/user/versionUpdate.png" alt=""></image>
            <view @click="showVersion">版本更新</view>
            <u-badge :isDot="isDot"></u-badge>
          </view>
          <view class="show-line"></view>
          <view class="show-lagout show-select" @click="logout">
            <image src="@/static/images/user/lagout.png" alt=""></image>
            <view>退出</view>
          </view>
        </view>



      </view>
      <view class="user-center-options">
        <view class="every-option" v-for="(item, index) in everyOption" :key="index" @click="goRouter2(item)">
          <view class="img-detail">
            <image :src="item.imageUrl" alt=""></image>
            <!-- <view v-if="item.name === '操作中订单' || item.name === '历史订单'" class="detail-nums">{{ item.nums }}</view> -->
          </view>
          <text>{{ item.name }}</text>
        </view>
      </view>
    </view>
    <view class="user-center">
      <view class="user-center-content">
        <view class="user-center-notice" v-if="noticeList.length > 0">
          <swiper class="swiper" circular indicator-dots indicator-active-color="#FF0000" autoplay>
            <swiper-item v-for="(item, index) in noticeList" :key="index">
              <view class="notice-swiper">{{ item.OSN_MESSAGECONTENT }}</view>
              <view class="notice-text" @click="goRouter('/pages/user/news')" v-if="item.Goods.length > 0">
                {{ '委托单号 : ' + item.OSN_NUM + ' ; ' + '货物名称 : ' + item.Goods[0].NAME + ' ; 货物信息......' }}</view>
            </swiper-item>
          </swiper>
        </view>
        <view class="user-center-list">
          <view v-if="(userName != '请登录') && (orderList.length > 0)">
            <view class="list-title">操作中订单</view>
            <view class="list-content" v-for="(item, index) in orderList" :key="index">
              <view v-if="item.OrderType" :style="'height:' + item.height">
                <!-- 49 -->
                <image src="@/static/images/user/logistics.png" alt=""></image>
                <view class="content">
                  <view class="content-title">
                    <text>{{ item.SUPPLIERNAME }}</text>
                    <text>物流订单</text>
                  </view>
                  <view class="content-detail">
                    <view class="detail-port">
                      <view class="port-start portClass">{{ cutCityString(item.STARTPLACE, '-') }}</view>
                      <view class="port-type">
                        <image src="@/static/images/user/portArrow.png" alt=""></image>
                        <text>{{ item.STATUS }}</text>
                      </view>
                      <view class="port-end portClass">{{ cutCityString(item.ENDPLACE, '-') }}</view>
                    </view>
                    <view class="detail-text">
                      {{ '委托单号：' + item.NUM }}
                    </view>
                    <view class="detail-text" v-for="(item1, index1) in item.Goodslist" :key="index1">
                      {{ item1.GNAME + ' , ' }}
                      {{ (item1.GROSSWEIGHT ? item1.GROSSWEIGHT : '0') + 'kg , ' }}
                      {{ (item1.PACKAGENUM ? item1.PACKAGENUM : '0') + '件 , ' }}
                      {{ item1.VOLUME + 'm³' }}
                    </view>
                    <view class="detail-text">
                      {{ item.GOODSTYPE + '/' + item.BOXWAY + ' , ' }}
                      {{ '20GP*' + (item.OSLT_20GPCOUNT ? item.OSLT_20GPCOUNT : '0') + ' , ' }}
                      {{ '40GP*' + (item.OSLT_40GPCOUNT ? item.OSLT_40GPCOUNT : '0') + ' , ' }}
                      {{ '40HQ*' + (item.OSLT_40HQCOUNT ? item.OSLT_40HQCOUNT : '0') }}
                    </view>
                    <view class="detail-text">
                      {{ '发运日期：' + item.SENDGOODSDATE }}
                    </view>
                    <view class="detail-button">
                      <view class="button" @click="goDetail(item.UUID, item.OrderType)">详情</view>
                    </view>
                  </view>
                </view>
              </view>
              <view v-else style="height: 380rpx;">
                <image src="@/static/images/user/trade.png" alt=""></image>
                <view class="content">
                  <view class="content-title">
                    <text>{{ item.company }}</text>
                    <text>贸易订单</text>
                  </view>
                  <view class="content-detail">
                    <view class="special-text">{{ item.message1 }}</view>
                    <view class="detail-text">{{ item.message2 }}</view>
                    <view class="detail-text">{{ item.message3 }}</view>
                    <view class="detail-text">物流订单：<text>{{ item.message4 }}</text></view>
                    <view class="button-list">
                      <text>状态：{{ item.state1 }}</text>
                      <view @click="goDetail(item.UUID, item.OrderType)">详情</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="empty-class" v-else>
            <image src="@/static/images/user/empty.png" alt=""></image>
          </view>
        </view>
      </view>
    </view>


    <!-- 版本更新 -->
    <Version ref="Version"></Version>

    <view class="task" v-if="settingShow" @click="hidesettingShow"></view>
  </view>
</template>

<script>
import base from "@/request/base.js"
import Version from "@/components/versionUpdate.vue"

import { FormatterDate } from "@/utils/utils.js";
import { hasPermission, getItem, removeItem } from "@/utils/storage.js"; // //引入混入的文件
import determined from "@/static/images/user/determined.png"
import operation from "@/static/images/user/operation.png"
import history from "@/static/images/user/history.png"
import all from "@/static/images/user/all.png"
import {
  GetWorkOrdersNew,
  OrderSolutionNews
} from "@/request/api.js";

export default {
  data() {
    return {
      downloadUrl: base.downloadUrl || "", // 下载 app 地址，以及版本号地址
      isDot: false,  //版本更新小图标
      page: 1,
      settingShow: false,
      userName: '请登录',
      unreadMessages: '',
      messageTimer: null,
      everyOption: [
        {
          id: 1,
          name: '待确认订单',
          imageUrl: determined,
          url: '/pagesA/user/determineOrders',
          nums: 0
        },
        {
          id: 2,
          name: '操作中订单',
          imageUrl: operation,
          url: '/pagesA/user/operateOrders',
          nums: 20
        },
        {
          id: 3,
          name: '历史订单',
          imageUrl: history,
          url: '/pagesA/user/historyOrders',
          nums: 2
        },
        {
          id: 4,
          name: '全部订单',
          imageUrl: all,
          url: '/pagesA/user/allOrders',
          nums: 20
        }
      ],
      orderList: [],
      noticeState: '',
      noticeList: []
    }
  },
  components: {
    Version
  },
  onShow() {
    if (getItem('userdata').UUID) {
      // this.orderList = []
      this.userName = getItem('userdata').USR_NAME
      this.ordersQuery()
      this.noticeQuery()
      this.messageTimer = setInterval(() => {
        setTimeout(this.noticeQuery, 0)
      }, 1000 * 20)
    }
  },
  onReachBottom() {
    this.page = this.page + 1
    this.ordersQuery1()
  },
  methods: {
    // 显示弹框
    showVersion() {
      this.settingClick();  // 显示隐藏 菜单


      setTimeout(() => {
        this.$nextTick(() => {

          uni.getSystemInfo({
            success: (res) => {
              let version = res.appWgtVersion || res.appVersion;

              // console.log(res.platform);
              //检测当前平台，如果是安卓则启动安卓更新  
              if (res.platform == "android") {
                uni.request({
                  url: this.downloadUrl + `/version.txt`,
                  method: 'GET',
                  data: {},
                  success: res => {
                    // 线上接口的 版本，高于 我们手机安装的版本  //有更新
                    if (res.data > version) {
                      this.$refs.Version.showVersion();
                    } else {
                      this.$refs.Version.showVersion2();
                    }
                  },
                  fail: () => { },
                  complete: () => { }
                });
              }
            }
          })


        })  //当添加货物后，动态计算高度
      }, 100);
    },
    // 订单列表查询
    async ordersQuery() {
      let res = await GetWorkOrdersNew({
        page: this.page,
        limit: 5,
        status: 'D',
        Useruuid: getItem('userdata').UUID,
        num: ''
      })
      let list = res.data
      if (list.length > 0) {
        list.forEach(item => {
          item.SENDGOODSDATE = FormatterDate(item.SENDGOODSDATE).substring(0, 10)
          if (item.Goodslist.length >= 1) {
            item.height = 485 + ((item.Goodslist.length - 1) * 49) + 'rpx'
          } else {
            item.height = '436rpx'
          }
        })
        this.orderList = list
      }
    },
    async ordersQuery1() {
      let res = await GetWorkOrdersNew({
        page: this.page,
        limit: 5,
        status: 'D',
        Useruuid: getItem('userdata').UUID,
        num: ''
      })
      let list = res.data
      if (list.length > 0) {
        list.forEach(item => {
          item.SENDGOODSDATE = FormatterDate(item.SENDGOODSDATE).substring(0, 10)
          if (item.Goodslist.length >= 1) {
            item.height = 485 + ((item.Goodslist.length - 1) * 49) + 'rpx'
          } else {
            item.height = '436rpx'
          }
        })
        this.orderList = this.orderList.concat(list)
      }
    },
    // 消息
    async noticeQuery() {
      let res = await OrderSolutionNews({
        useruuid: getItem('userdata').UUID,
        page: 1,
        limit: 5
      })
      if (res.code == 200) {
        this.unreadMessages = res.count > 99 ? '99+' : res.count
        let response = res.data
        this.noticeList = response.length >= 3 ? response.slice(0, 3) : response
      }
    },
    cutCityString(city, format) {
      if (city) {
        let index = city.lastIndexOf(format)
        if (index == -1) {
          return city
        } else {
          return city.slice(index + 1)
        }
      } else {
        return ''
      }
    },
    gologin(url) {
      if (this.userName && this.userName !== '请登录') {
        // console.log('登录')
      } else {
        uni.navigateTo({
          url: url
        })
      }
    },
    logout() {
      removeItem('token')
      removeItem('userdata')

      uni.reLaunch({
        url: '/pages/login/index'
      })
    },
    // 隐藏 设置下拉菜单
    hidesettingShow() {
      if (this.settingShow) {
        this.settingShow = false;
      }
    },
    // 显示 隐藏  设置 下拉菜单
    settingClick() {
      this.settingShow = !this.settingShow
    },
    // 路由跳转
    goRouter(url) {
      uni.navigateTo({
        url: url
      })
      this.hidesettingShow();  //没办法，样式 被写成绝对定位的，这里只能 麻烦的再隐藏一次设置弹框
    },
    // 待确认订单  / 操作中订单 /  历史订单 / 全部订单  路由跳转
    goRouter2(item) {
      uni.navigateTo({
        url: `/pagesA/user/orders?id=${item.id}`
      })
    },
    // 详情跳转
    goDetail(uuid, OrderType) {
      uni.navigateTo({
        url: '/pages/user/orderDetail' + '?uuid=' + uuid + '&OrderType=' + OrderType
      })
    },
    // 是否展示 版本更新小图标
    showIsDot() {
      uni.getSystemInfo({
        success: (res) => {
          let version = res.appWgtVersion || res.appVersion;

          console.log(res, '获取app信息');
          // console.log(res.platform);
          //检测当前平台，如果是安卓则启动安卓更新  

          if (res.platform == "android") {
            uni.request({
              url: this.downloadUrl + `/version.txt`,
              method: 'GET',
              data: {},
              success: res => {
                // 线上接口的 版本，高于 我们手机安装的版本
                if (res.data > version) {
                  this.isDot = true;
                }
              },
              fail: () => { },
              complete: () => { }
            });
          }

        }

      })
    }
  },
  onHide() {
    // 清掉定时器
    clearInterval(this.messageTimer);
    this.messageTimer = null;

    this.hidesettingShow();  //隐藏 设置下拉菜单
  },
  mounted() {
    this.showIsDot();
  }
}
</script>

<style lang="scss" scoped>
.user {
  .user-top {
    width: 100%;
    height: 238rpx;
    position: relative;
    background: linear-gradient(88deg, #51a1ff 2%, #52dfcc 99%);

    .user-top-infor {
      z-index: 9;
      transform: translateZ(20rpx);
      position: absolute;
      height: 134rpx;
      top: 32rpx;
      left: 60rpx;
      display: flex;
      align-items: center;

      .infor-icon {
        height: 134rpx;
        width: 134rpx;
        border: 2rpx solid #a7cfff;
        border-radius: 50%;
        display: flex;
        margin-right: 60rpx;

        image {
          width: 64rpx;
          height: 80rpx;
          margin: auto;
        }
      }

      .infor-name {
        height: 40rpx;
        font-size: 30rpx;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        text-align: left;
        color: #ffffff;
        letter-spacing: 1.2rpx;
      }
    }

    .user-top-set {
      z-index: 11;
      transform: translateZ(20rpx);
      height: 200rpx;
      position: absolute;
      top: 30rpx;
      right: 30rpx;
      width: 190rpx;

      .set-content {
        height: 48rpx;
        margin-bottom: 4rpx;
        width: 100%;
        display: flex;
        justify-content: space-between;

        .set-icon {
          width: 48rpx;
          height: 48rpx;
          position: relative;

          image {
            width: 48rpx;
            height: 48rpx;
          }

          .mark-num {
            position: absolute;
            padding: 0rpx 3rpx;
            top: -2rpx;
            right: -5rpx;
            width: 22rpx;
            height: 24rpx;
            background: #ff4f01;
            border: 2rpx solid #ff4f01;
            border-radius: 50%;
            font-size: 15rpx;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }

      .set-show {
        z-index: 11;
        position: absolute;
        top: 58rpx;
        right: 0;
        width: 240rpx;
        min-height: 228rpx;
        background: #ffffff;
        border-radius: 10rpx;
        box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.16);

        .show-select {
          line-height: 44rpx;
          display: flex;
          align-items: center;

          image {
            width: 32rpx;
            height: 32rpx;
            margin-right: 12rpx;
          }

          view {
            font-size: 24rpx;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            color: #666666;
            margin-right: 12rpx;
          }
        }

        .show-advice {
          padding: 22rpx 16rpx 18rpx;
        }

        .show-line {
          margin: 0rpx 16rpx;
          height: 0rpx;
          border: 2rpx solid #cccccc;
        }

        .show-lagout {
          padding: 18rpx 20rpx 22rpx;
        }
      }


    }

    .user-center-options {
      z-index: 9;
      transform: translateZ(20rpx);
      position: absolute;
      width: calc(100% - 60rpx);
      left: 30rpx;
      bottom: -150rpx;
      height: 140rpx;
      opacity: 0.95;
      background: #ffffff;
      border-radius: 40rpx;
      box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(81, 161, 255, 0.30);
      padding: 34rpx 0rpx 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .every-option {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        .img-detail {
          width: 56rpx;
          height: 56rpx;
          margin-bottom: 20rpx;
          position: relative;

          image {
            width: 56rpx;
            height: 56rpx;
          }

          .detail-nums {
            position: absolute;
            top: -2rpx;
            right: -5rpx;
            width: 24rpx;
            height: 24rpx;
            background: #ff0000;
            border: 2rpx solid #ffffff;
            border-radius: 50%;
            font-size: 16rpx;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

        text {
          height: 32rpx;
          font-size: 24rpx;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          text-align: center;
          color: #333333;
          letter-spacing: 0.96rpx;
        }
      }
    }
  }

  .user-center {
    position: relative;
    width: 100%;
    background-color: #a7cfff;

    .user-center-content {
      margin: 0rpx 30rpx;
      width: calc(100% - 60rpx);
      position: absolute;
      top: 150rpx;

      .user-center-notice {
        margin-top: 20rpx;
        height: 140rpx;
        opacity: 0.95;
        background: #ffffff;
        border-radius: 40rpx;
        box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(81, 161, 255, 0.30);
        padding: 20rpx 30rpx 10rpx;

        .swiper {
          height: 100%;
          width: 100%;

          .notice-swiper {
            height: 32rpx;
            font-size: 24rpx;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 600;
            text-align: left;
            color: #333333;
            letter-spacing: 0.96rpx;
            margin-bottom: 20rpx;
          }

          .notice-text {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            height: 30rpx;
            line-height: 30rpx;
            font-size: 22rpx;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            text-align: left;
            color: #999999;
            letter-spacing: 0.88rpx;
          }
        }
      }

      .user-center-list {
        margin-top: 30rpx;

        .list-title {
          height: 38rpx;
          font-size: 28rpx;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 600;
          text-align: left;
          color: #000000;
          letter-spacing: 1.12rpx;
          margin-bottom: 20rpx;
        }

        .list-content {
          width: 100%;
          margin-bottom: 20rpx;
          border-radius: 40rpx;
          position: relative;

          image {
            width: 100%;
            height: 326rpx;
            opacity: 0.95;
          }

          .content {
            position: absolute;
            top: 20rpx;
            width: 100%;

            .content-title {
              margin: 0rpx 30rpx 20rpx;
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-family: Microsoft YaHei, Microsoft YaHei-Bold;
              font-size: 24rpx;
              color: #ffffff;

              text:nth-child(1) {
                font-weight: 700;
                text-align: left;
              }

              text:nth-child(2) {
                font-weight: 400;
                text-align: right;
              }
            }

            .content-detail {
              // height: 332rpx;
              background: #ffffff;
              border-radius: 40rpx;
              box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(81, 161, 255, 0.30);
              position: relative;
              // padding: 40rpx 30rpx 20rpx;

              .detail-port {
                padding: 40rpx 30rpx 30rpx;
                height: 77rpx;
                display: flex;
                justify-content: center;

                .portClass {
                  height: 42rpx;
                  font-size: 32rpx;
                  font-weight: 700;
                  color: #333333;
                  width: calc((100% - 200rpx) / 2);
                }

                .port-start {
                  text-align: right;
                }

                .port-type {
                  display: flex;
                  align-items: center;
                  flex-direction: column;
                  width: 200rpx;

                  image {
                    width: 48rpx;
                    height: 48rpx;
                  }

                  text {
                    height: 28rpx;
                    font-size: 20rpx;
                    font-weight: 400;
                    text-align: center;
                    color: #2c66e1;
                  }
                }

                .port-end {
                  text-align: left;
                }
              }

              .special-text {
                padding: 40rpx 30rpx 20rpx;
                height: 30rpx;
                font-size: 22rpx;
                font-weight: 400;
                text-align: left;
                color: #666666;
              }

              .detail-text {
                padding: 0rpx 30rpx 20rpx;
                height: 30rpx;
                font-size: 22rpx;
                font-weight: 400;
                text-align: left;
                color: #666666;

                text {
                  color: #2C66E1;
                }
              }

              .detail-button {
                padding: 0rpx 30rpx 20rpx;
                height: 48rpx;
                display: flex;
                align-items: center;
                justify-content: flex-end;

                .button {
                  font-size: 24rpx;
                  width: 140rpx;
                  height: 48rpx;
                  background: #ffffff;
                  border: 2rpx solid #51a1ff;
                  border-radius: 10rpx;
                  box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(81, 161, 255, 0.30);
                  color: #51a1ff;
                  letter-spacing: 0.96rpx;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
              }

              .button-list {
                height: 48rpx;
                padding: 0rpx 30rpx 20rpx;
                bottom: 0rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: calc(100% - 60rpx);

                text {
                  font-size: 20rpx;
                  text-align: left;
                  color: #3487f3;
                }

                view {
                  font-size: 24rpx;
                  width: 140rpx;
                  height: 48rpx;
                  background: #ffffff;
                  border: 2rpx solid #51a1ff;
                  border-radius: 10rpx;
                  box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(81, 161, 255, 0.30);
                  color: #51a1ff;
                  letter-spacing: 0.96rpx;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
              }
            }
          }
        }

        .empty-class {
          width: 600rpx;
          margin: 0rpx auto;
          text-align: center;

          image {
            width: 520rpx;
            height: 610rpx;
          }
        }
      }
    }
  }


  .task {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    // background: rgba(0, 0, 0, 0.1);
    z-index: 10;
  }
}
</style>